<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/users'
const sUser = useUserStore()
console.log(sUser.account.name)

const menuValue = ref('item1')
const changeHandler = (active) => {
  console.log('change', active)
}
const mTheme = ref('light')
const changeTheme = (mode) => {
  document.documentElement.setAttribute('theme-mode', mode)
}
const visLogin = ref(false)
import Login from './Login.vue'

const visSign = ref(false)
import Sign from './Sign.vue'

const handleNav = (path) => {
  visSign.value = true
  sUser.getInfo().then((result) => alert(result.type))
}
const handleLogout = () => {
  sUser.logout()
}
const options = [
  { content: 'light', value: 1 },
  { content: 'dark', value: 1 },
  { content: 'green', value: 2 },
  { content: 'orange', value: 2 }
]
const clickHandler = (data) => {
  if (data.value == 1) document.documentElement.setAttribute('theme-mode', data.content)
  if (data.value == 2) document.documentElement.setAttribute('theme-color', data.content)
}
import Search from './Search.vue'
import Notice from './Notice.vue'

const test = () => {
  sUser.test('test')
}
const unlink = () => {
  sUser.unlink()
}
var layout = 'layout'
</script>

<template>
  <div>
    <t-head-menu v-model="menuValue" theme="light" @change="changeHandler">
      <template #logo>
        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
      </template>
      <t-menu-item value="item1"> <RouterLink to="/">Home</RouterLink></t-menu-item>
      <t-menu-item value="item2"> <RouterLink to="/about">About</RouterLink> </t-menu-item>
      <t-menu-item value="item3"> <RouterLink to="/upload">Upload</RouterLink> </t-menu-item>
      <t-menu-item value="item4"> <RouterLink to="/editor">Editor</RouterLink> </t-menu-item>
      <t-menu-item value="item5"> <RouterLink to="/vditor">Vditor</RouterLink> </t-menu-item>
      <t-menu-item value="item6"> <RouterLink to="/docx">Docx</RouterLink> </t-menu-item>
      <t-button variant="text" shape="square" @click="test">
        <template #icon><t-icon name="link" style="margin-top: 5px" /></template>
      </t-button>
      <t-button variant="text" shape="square" @click="unlink">
        <template #icon><t-icon name="link-unlink" style="margin-top: 5px" /></template>
      </t-button>
      <template #operations>
        <div class="operations-container">
          <!-- 搜索框 -->
          <search :layout="layout" />
        </div>
        <!-- 全局通知 -->
        <notice />
        <t-dropdown v-if="sUser.account.id != 0" :min-column-width="135" trigger="click">
          <template #dropdown>
            <t-dropdown-menu>
              <t-dropdown-item
                class="operations-dropdown-container-item"
                @click="handleNav('/user/index')"
              >
                <t-icon name="user-circle"></t-icon>个人中心
              </t-dropdown-item>
              <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                <t-icon name="poweroff"></t-icon>退出登录
              </t-dropdown-item>
            </t-dropdown-menu>
          </template>
          <t-button class="header-user-btn" theme="default" variant="text">
            <template #icon>
              <t-icon class="header-user-avatar" name="user" />
            </template>
            <div class="header-user-account">{{ sUser.account.name }}</div>
            <template #suffix><t-icon name="chevron-down" /></template>
          </t-button>
        </t-dropdown>
        <t-button v-else variant="text" shape="square" @click="visLogin = true">
          <template #icon><t-icon name="user" style="margin-top: 5px" /></template>
        </t-button>

        <t-radio-group v-model="mTheme" size="small" @change="changeTheme">
          <t-radio-button class="theme" value="light"
            ><t-icon size="medium" name="sunny"
          /></t-radio-button>
          <t-radio-button class="theme" value="dark"
            ><t-icon size="medium" name="moon"
          /></t-radio-button>
        </t-radio-group>
        <t-dropdown class="theme" :options="options" @click="clickHandler">
          <t-button theme="default" variant="outline" shape="square">
            <t-icon name="ellipsis"
          /></t-button>
        </t-dropdown>
      </template>
      <t-space> </t-space>
    </t-head-menu>
  </div>
  <div>
    <Login
      v-model="visLogin"
      @some-event="
        (isSign) => {
          visSign = isSign
          visLogin = false
        }
      "
    ></Login>
    <Sign v-model="visSign" />
  </div>
</template>

<style lang="less" scoped>
.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}
.t-demo-menu--dark {
  .t-button {
    color: #fff;
    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}
.theme {
  border-width: 0 !important;
}
</style>
